<template>
  <div class="userInfo">
    <!-- 头像 -->
    <el-avatar :size="200" :src="userInfo.headimgurl ? userInfo.headimgurl : defAvatarUrl" shape="square">
    
    </el-avatar>
    <!-- 用户信息 -->
    <el-descriptions :column="2" border title="我的中心">
			<template slot="extra">
				<el-button type="primary" size="small">操作</el-button>
			</template>
			<el-descriptions-item label="unid">{{ userInfo.unid }}</el-descriptions-item>
			<el-descriptions-item label="账号">{{ userInfo.username }}</el-descriptions-item>
			<el-descriptions-item label="vip等级">{{ userInfo.vipLevel?userInfo.vipLevel:"不是vip" }}</el-descriptions-item>
			<el-descriptions-item label="vip到期时间">
				<el-tag type="danger"
					effect="dark">{{ (+new Date() - userInfo.vipStamp)>0?"已过期":userInfo.vipExpires}}
        </el-tag>
			</el-descriptions-item>
			<el-descriptions-item label="昵称">
				<el-tag type="success"
					effect="dark">
          {{ userInfo.nickname }}
        </el-tag>
			</el-descriptions-item>
			<el-descriptions-item label="手机号">{{ userInfo.phone }}</el-descriptions-item>
			<el-descriptions-item label="角色名称">{{ userInfo.roleName }}</el-descriptions-item>
			<el-descriptions-item label="性别">
				<el-tag size="small">{{ userInfo.sex==1?"男":"女" }}</el-tag>
			</el-descriptions-item>
			<el-descriptions-item label="省份">
        {{userInfo.province}}
      </el-descriptions-item>
			<el-descriptions-item label="城市">{{ userInfo.city }}</el-descriptions-item>
		</el-descriptions>
	</div>
</template>
<script>
	import { mapState } from "vuex";
	export default {
		computed: {
			...mapState(['userInfo'])
		},
		data() {
			return {
				defAvatarUrl: "https://p.ssl.qhimg.com/t01dca93cf4daa097f0.jpg"
			}
		}
	}
</script>